<h1 class="page_title">
		标签	</h1>
		<h2>
		1 标签输入效果	</h2>
	<div class="codeView bs-docs-example ">
			  	<div class="hui-tags ">
		    	<div class="hui-tags-editor cl ">
		    		<i class="icon-tags ">
			</i> 
    		<span class="hui-tags-token ">
		Tiny-ui前端框架	</span>
    		<span class="hui-tags-token ">
		CSS3	</span>
    		<span class="hui-tags-token ">
		HTML5	</span>
      		<div class="hui-tags-iptwrap ">
		            	<input	  type="text" class="hui-tags-input "
	  maxlength="20">
            	<lable class="hui-tags-lable ">
		添加相关标签，用空格或回车分隔	</lable>
      	    </div>
    	</div>
    	<div class="hui-tags-list ">
                 	<div class="hui-notag " style="display:none">
		暂无常用标签	</div>
      	<div class="hui-tags-has ">
                			<span> 
		前端框架    </span>
      			<span> 
		前端开发    </span>
      			<span> 
		Tiny-ui    </span>
          </div>
         </div>
  	</div>
	</div>

		<h2>
		2 标签混排效果	</h2>
	<div class="codeView bs-docs-example ">
			<div class="bk_gray" style="width:250px;overflow:hidden;">
		<div class="pd-10 tags">
					<a href="#">Tiny-ui前端框架</a>
			<a href="#">Web安全色</a>
			<a href="#">jQuery轮播插件</a>
			<a href="#">韩国云虚拟主机</a>
			<a href="#">IEbug</a>
			<a href="#">IT网址导航</a>
			<a href="#">网站常用小图标</a>
			<a href="#">web工具箱</a>
			<a href="#">网站常用背景素材</a>
			<a href="#">Tiny-ui阅读</a>
			<a href="#">弹出层插件</a>
			<a href="#">SuperSlide插件</a>
			<a href="#">TouchSlide</a>
		</div>
	</div>
	</div>

		<h2>
		3 定制标签	</h2>
	<div class="codeView bs-docs-example ">
		    		<div data-widget-sortable="false" data-widget-custombutton="false"
        	data-widget-fullscreenbutton="false" data-widget-deletebutton="false"
        	data-widget-togglebutton="false" data-widget-editbutton="false"
        	data-widget-colorbutton="false" id="wid-id-8"  class="jarviswidget " role="widget">
    					<header role="heading">
								<h2>
		标签标题	</h2>
					<ul class="nav nav-tabs pull-right in ">
									<li class="active ">
											<a href="#hb1" data-toggle="tab">
											<i class="fa fa-lg">
						</i>
							<span class="hidden-mobile hidden-tablet"> 标签右底部 </span>
							</a>
							</li>
						<li>
									<a href="#hb2" data-toggle="tab">
											<i class="fa fa-lg">
						</i>
							<span class="hidden-mobile hidden-tablet"> 标签右顶部 <span class="label bg-color-blue txt-color-white"> label <i class="fa fa-exclamation"></i> </span> </span>
							</a>
						</li>
					</ul>
				</header>

			<!-- widget div-->
			<div role="content">
				<!-- widget edit box -->
				<div class="jarviswidget-editbox">
				</div>
				<!-- end widget edit box -->
				<!-- widget content -->
				<div class="widget-body">
					<div class="tab-content">
						<div id="hb1" class="tab-pane active">
							<div class="tabbable tabs-below">
								<div class="tab-content padding-10">
									<div id="A1" class="tab-pane active">
										<p>
											他们俩都没有打过季后赛，但却也都见识过一些大场面。他们都代表美国队赢得过世界冠军，可是世界杯一场定胜负的比赛和持续两周的系列赛又不一样。
											这期间的差别很大，当然总的来说他们肯定有机会。公牛和他们是东部最主要的两个竞争者。
										</p>
									</div>
									<div id="B1" class="tab-pane">
										<p>
											快餐车fixie土食者,accusamus筹划的这木棒种单品咖啡鱿鱼的。实习+ 1 labore velit,博客的PBR紧身裤下一个级别韦斯·安德森工匠four loko从精酿啤酒的困难。
										</p>
									</div>
									<div id="C1" class="tab-pane">
										<p>
											信托基金麦麸摄取凸版印刷,keytar原始牛仔头巾etsy艺术派对之前售罄主洁净无谷蛋白鱿鱼scenester发现窗外cosby毛衣。腰包波特兰麦麸摄取DIY、艺术派对土食者狼陈词滥调高回声公园奥斯汀的生活。信誉乙烯头巾DIY鼠尾草PBR,banh mi之前售罄状态。
										</p>
									</div>
								</div>
								<ul class="nav nav-tabs">
									<li class="active pull-right">
										<a href="#A1" data-toggle="tab">选项一</a>
									</li>
									<li class="pull-right">
										<a href="#B1" data-toggle="tab">选项二</a>
									</li>
									<li class="pull-right">
										<a href="#C1" data-toggle="tab">选项三</a>
									</li>
								</ul>
							</div>

						</div>
						<div id="hb2" class="tab-pane">

							<ul class="nav nav-tabs tabs-pull-right" id="internal-tab-1">
								<li class="active">
									<a data-toggle="tab" href="#is1">选项一</a>
								</li>
								<li>
									<a data-toggle="tab" href="#is2">选项二</a>
								</li>
								<li>
									<a data-toggle="tab" href="#is3">选项三</a>
								</li>
							</ul>
							<div class="tab-content padding-10">
								<div id="is1" class="tab-pane active">
									<p>
										我爱大家!我喜欢给身边的一些人来说,我喜欢远离他人,和一些我就爱打正确的面对!

									</p>
								</div>
								<div id="is2" class="tab-pane fade">
									<p>
										快餐车fixie土食者,accusamus筹划的这木棒种单品咖啡鱿鱼的。实习+ 1 labore velit,博客的PBR紧身裤下一个级别韦斯·安德森工匠four loko从精酿啤酒的困难。
									</p>
								</div>
								<div id="is3" class="tab-pane fade">
									<p>
										信托基金麦麸摄取凸版印刷,keytar原始牛仔头巾etsy艺术派对之前售罄主洁净无谷蛋白鱿鱼scenester发现窗外cosby毛衣。腰包波特兰麦麸摄取DIY、艺术派对土食者狼陈词滥调高回声公园奥斯汀的生活。信誉乙烯头巾DIY鼠尾草PBR,banh mi之前售罄状态。
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- end widget content -->
			</div>
			<!-- end widget div -->
		    </div>
		<!--<style>
		.jarviswidget>div{border-width:1px; padding:2px 0 1px 6px;}
		.tabs-right.nav-tabsty .nav-tabs li a{border:none;padding:2px 8px;background:#f2f2f2;min-width:10px;width:28px;display:inline-block}
		.tabs-right.nav-tabsty .nav-tabs>li.active>a,.tabs-right.nav-tabsty .nav-tabs>li.active>a:hover{background:#fff}
		.tabs-right.nav-tabsty .nav-tabs li a:hover{background:#eee;}
		.tabs-right.nav-tabsty{ margin-bottom:-2px; margin-top:-2px;}
		.tabs-right.nav-tabsty>.nav-tabs{border:none}
		</style>-->
	<div class="jarviswidget" id="wid-id-6" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-sortable="false">
	<header><h2>标题名称</h2></header>
	<!-- widget div-->
	<div>
		<!-- widget edit box -->
		<div class="jarviswidget-editbox">
			<!-- This area used as dropdown edit box -->
		</div>
		<!-- end widget edit box -->
		<!-- widget content -->
		<div class="widget-body">
			<div class="tabs-right nav-tabsty">
				<ul class="nav nav-tabs">
					<li class="active">
						<a href="#tab1" data-toggle="tab">标题1</a>
					</li>
					<li>
						<a href="#tab2" data-toggle="tab">标题2</a>
					</li>
					<li>
						<a href="#tab3" data-toggle="tab">标题3</a>
					</li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="tab1">
						<p>
							他们俩都没有打过季后赛，但却也都见识过一些大场面。他们都代表美国队赢得过世界冠军，可是世界杯一场定胜负的比赛和持续两周的系列赛又不一样。 这期间的差别很大，当然总的来说他们肯定有机会。公牛和他们是东部最主要的两个竞争者。
						</p>
					</div>
					<div class="tab-pane" id="tab2">
						<p>
							iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
30
      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
      					</p>
					</div>
					<div class="tab-pane" id="tab3">
						<p>
							Hi，他们俩都没有打过季后赛，但却也都见识过一些大场面。他们都代表美国队赢得过世界冠军，可是世界杯一场定胜负的比赛和持续两周的系列赛又不一样。 这期间的差别很大，当然总的来说他们肯定有机会。公牛和他们是东部最主要的两个竞争者。
						</p>
					</div>
				</div>
			</div>
		</div>
		<!-- end widget content -->
	</div>
	<!-- end widget div -->
</div>
<!-- end widget -->	</div>

		<h3>
		组件包	</h3>
	<pre class="prettyprint linenums"><span class="Huialert-danger">以上组件依赖org.tinygroup.tags包即可</span></pre>
